<template>
	<view class="userInfo">
		<!-- 用户信息 -->
		<view class="user-info">
			<image :src="avatar" mode="aspectFill"></image>
			<view class="info">
				<view class="nameInfo">
					<text>{{userInfo.name}}</text>
					<button @click="finishInfo" class="button copyBtn">完善</button>
				</view>
				<text>用户编号: {{ userInfo.id }}</text>
				<button @click="copyId" class="button copyBtn">复制编号</button>
			</view>
		</view>

		<!-- 数据统计  -->
		<view class="data-statistics">
			<text>数据统计</text>
			<view class="day-static">
				<button class=" button" :class="dateRangeIndex == index? 'active':''" v-for="(item,index) in dateRanges"
					:key="index" @click="dateRange(index)">{{ item }}</button>
			</view>
			<view class="statistic-items">
				<view class="item">
					<text>消耗</text>
					<text>{{ statistics.consumption }}</text>
				</view>
				<view class="item">
					<text>有效数量</text>
					<text>{{ statistics.validCount }}</text>
				</view>
				<view class="item">
					<text>单价</text>
					<text>￥2.8</text>
				</view>
			</view>
		</view>

		<!-- 待审核 -->
		<view class="pending-review">
			<text>待审核</text>
			<text>{{ pendingReview.count }}</text>
			<button @click="review" class="button">审核</button>
		</view>

		<!-- 账户余额 -->
		<view class="account-balance">
			<text>账户余额</text>
			<text>￥{{ amount }}</text>
			<button @click="recharge" class="button">充值</button>
		</view>

		<!-- 系统使用时间 -->
		<view class="system-time">
			<text>还可使用系统</text>
			<text>{{ systemTime }}</text>
			<button @click="renew" class="button">续费</button>
		</view>

		<!-- 店铺管理 -->
		<view class="shop-management">
			<text>店铺管理</text>
			<button @click="manageShop" class="button">管理</button>
		</view>

		<!-- 审核记录 -->
		<view class="review-record">
			<text>审核记录</text>
			<button @click="viewRecord" class="button">查看</button>
		</view>
		
		<!-- 卡片印刷 -->
		<view class="card-printing">
			<text>店铺二维码</text>
			<button @click="purchaseCard" class="button">生成</button>
		</view>
		<view class="card-printing">
			<text>黑名单管理</text>
			<button @click="block" class="button">查看</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '饭星游客',
					id: 'FX333381'
				},
				statistics: {
					consumption: '0.00元',
					validCount: '0',
					price: '0.00元'
				},
				pendingReview: {
					count: '0条'
				},
				accountBalance: 0.00,
				systemTime: '5天',
				dateRanges: ['今日', '昨日', '近7日', '近30日', '自定义日期'],
				dateRangeIndex: 0,
				id:'',
				type:0,
				storeId:'',
				amount:0,
				avatar:'',
			};
		},
		onLoad(options){
			console.log("home页面的路径带参"+options);
			this.id = options.status;
			this.storeId = options.storeId;
			this.ifShow();
		},
		onShow(){
			uni.request({
			   url: 'http://zhaoyang.nat300.top/main',
			   method: 'POST',
			   data: {
			     id: this.id,
			     storeId:this.storeId,
			   	 type:this.type,
			   },
			   header: {
			     'content-type': 'application/json' // 默认值
			   },
			   success:(res)=>{
				   this.amount = res.data.merchant.amount
			   }
			})
		},
		methods: {
			async ifShow(){
				await uni.request({
				   url: 'http://zhaoyang.nat300.top/main',
				   method: 'POST',
				   data: {
				     id: this.id,
					 storeId:this.storeId,
					 type:this.type,
				   },
				   header: {
				     'content-type': 'application/json' // 默认值
				   },
				   success:(res)=>{
				     console.log('POST 请求成功:', res);
				     uni.showToast({
				       title: '提交成功',
				       icon: 'success'
				     });
					 this.statistics.validCount = res.data.merchantAccount.status;
					 this.statistics.consumption=res.data.merchantAccount.consume;
					 this.statistics.price=res.data.merchant.amount;
					 this.userInfo.id = res.data.merchant.id;
					 this.userInfo.name = res.data.merchant.name;
					 this.pendingReview.count = res.data.count;
					 this.systemTime = res.data.merchant.systemDaysLeft;
					 this.avatar = res.data.merchant.avatar;
					 
					 if(res.data.merchant.name==null||res.data.merchant.phone==null){
					 	uni.showModal(
					 	{
					 		title: '温馨提示',
					 		content: '请先完善商户信息',
					 		showCancel: false,
					 		confirmText: '前往完善',
					 		success: res => {
								console.log(res)
					 			uni.navigateTo({
					 				url:`/pages/merchantinfo/merchantinfo?status=${this.id}&storeId=${this.storeId}`
					 			})

					 		}
					 	});
					 }
				   },
				   fail(error) {
				     console.error('POST 请求失败:', error);
				     uni.showToast({
				       title: '提交失败，请重试',
				       icon: 'none'
				     });
				   }
				 });
			},
			copyId() {
				uni.setClipboardData({
					data: this.userInfo.id,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
			dateRange(e) {
				this.dateRangeIndex = e;
				if(e==0){
					this.type=0;
				}else if(e==1){
					this.type=1;
				}else if(e==2){
					this.type=7;
				}else if(e==3){
					this.type=30
				}
				console.log("type:"+this.type)
			},
			
			recharge() {
				uni.navigateTo({
					url:`/pages/home/recharge/recharge?status=${this.userInfo.id}`
				})
			},
			
			manageShop() {
				uni.navigateTo({
					url:`/pages/storeset/storeset?status=${this.id}`
				})
			},
			finishInfo(){
				uni.navigateTo({
					url:`/pages/merchantinfo/merchantinfo?status=${this.id}`
				})
			},
			viewRecord(){
				uni.navigateTo({
					url:`/pages/home/homeCheckInfo/homeCheckInfo?status=${this.userInfo.id}`
				})
			},
			block(){
				uni.navigateTo({
					url:`/pages/home/block/block?merchantId=${this.userInfo.id}`
				})
			},
			purchaseCard(){
				uni.navigateTo({
					url:`/pages/code/code?merchantId=${this.userInfo.id}`
				})
			}
		}
	};
</script>

<style lang="scss">
	.userInfo {
		padding: 20px;
		font-size: 16px;
		color: #333;

		.user-info {
			display: flex;
			width: 100%;

			image {
				flex: 1;
				width: 200rpx;
				height: 200rpx;

			}

			.info {
				flex: 2;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-content: flex-start;
			}
			.nameInfo{
				display: flex;
				justify-content: space-between;
				
			}
			text {
				margin-bottom: 5px;
			}

			.copyBtn {
				width: 150rpx;
				&:hover {
					background-color: #e0e0e0;
				}
			}
		}

		.button {
			/* 清除默认样式 */
			appearance: none;
			-webkit-appearance: none;
			background-color: transparent;
			border: none;
			padding: 0 10rpx;
			margin: 0;
			outline: none;
			font-size: 30rpx;


		}

		// 数据统计
		.data-statistics {
			margin-top: 20px;

			.day-static {
				display: flex;
				justify-content: space-around;
			}

			.statistic-items {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;

				.item {
					flex: 1;
					text-align: center;
					margin: 0 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					&:first-child {
						margin-left: 0;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.active {
			background-color: green;
			color: white;
		}

		.pending-review,
		.account-balance,
		.system-time,
		.shop-management,
		.review-record,
		.card-printing {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;

			text {
				flex: 1;
			}
		}
	}
</style>